<script>
import VulnerabilityReport from '../shared/vulnerability_report/vulnerability_report.vue';
import { FILTERS, FIELDS } from '../shared/vulnerability_report/constants';
import VulnerabilityFindingModal from './vulnerability_finding_modal.vue';

export default {
  components: {
    VulnerabilityReport,
    VulnerabilityFindingModal,
  },
  inject: ['pipeline', 'projectFullPath'],
  data() {
    return {
      graphqlFilters: undefined,
      selectedFinding: undefined,
    };
  },
  methods: {
    // Two issues here for the pipeline GraphQL endpoint:
    // 1. Severity and reportType filters, unlike for vulnerabilities, need to be lower case.
    // 2. Empty array returns an empty result, so we need to pass undefined in that case.
    normalizeForGraphQLQuery(filter) {
      return filter?.length ? filter.map((s) => s.toLowerCase()) : undefined;
    },
    transformFilters(filters) {
      return {
        ...filters,
        reportType: this.normalizeForGraphQLQuery(filters.reportType),
        severity: this.normalizeForGraphQLQuery(filters.severity),
      };
    },
    showModal(finding) {
      this.selectedFinding = finding;
    },
    hideModal() {
      this.selectedFinding = undefined;
    },
  },
  filtersToShow: [FILTERS.STATUS, FILTERS.SEVERITY, FILTERS.TOOL_PIPELINE],
  fieldsToShow: [
    FIELDS.CHECKBOX,
    FIELDS.STATUS,
    FIELDS.SEVERITY,
    FIELDS.DESCRIPTION,
    FIELDS.IDENTIFIER,
    FIELDS.TOOL,
  ],
};
</script>

<template>
  <div>
    <vulnerability-report
      :fields="$options.fieldsToShow"
      :filter-dropdowns="$options.filtersToShow"
      :filter-fn="transformFilters"
      @vulnerability-clicked="showModal"
    />

    <vulnerability-finding-modal
      v-if="selectedFinding"
      :finding-uuid="selectedFinding.id"
      :pipeline-iid="pipeline.iid"
      :project-full-path="projectFullPath"
      @hidden="hideModal"
    />
  </div>
</template>
